<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>创建打卡任务</title>
		<!-- elementUI css -->
        <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
		<link rel="stylesheet" href="css/public.css">
		<style type="text/css">
			html {
				background-color: #F1F3F4;
			}

			.title {
				background-color: #FFFFFF;
				height: 40px;
				line-height: 40px;
				padding: 0 20px;
			}


			.box {
				padding: 10px 20px;
			}

			/* 二维码上传 */
			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 150px;
				height: 150px;
				line-height: 150px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}

			.el-input__inner {
				height: 30px;
			}
		</style>

	</head>

	<body>
		<div id="app">
			<div class="title">
				<div>创建打卡任务</div>
			</div>
			<div class="box">
				<el-card class="box-card">
					<div>
						<strong>打卡活动设置</strong>
						<el-divider></el-divider>
					</div>
					<div>
						<el-form ref="actives" :model="actives" label-width="120px">
							<el-form-item label="打卡活动设置">
								<el-input style="width: 600px;" v-model="actives.activeName" maxlength="10"
									show-word-limit></el-input>
							</el-form-item>
							<el-form-item label="打卡活动说明">
								<el-input style="width: 600px;" rows='5' type="textarea" v-model="actives.explain"
									maxlength="500" show-word-limit>
								</el-input>
							</el-form-item>
							<el-form-item label="选择打卡类型">
								<el-radio-group v-model="actives.cardLabels1">
									<el-radio :label="1">连续打卡</el-radio>
									<el-radio :label="2">累计打卡</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="打卡任务设置">
								<div v-for="(task,index) in tasks">第!{!{++index}}阶段：用户连续打卡<el-input
										style="width: 100px;" v-model="task.days"></el-input>天，即可领取<el-input
										style="width: 100px;" v-model="task.names"></el-input>
									<i :class="task.del" style="font-size: 20px;" @click="removeList(index-1)"></i>
								</div>
								<el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="addTask">添加任务
								</el-button>
							</el-form-item>
							<el-form-item label="截止日期">
								<el-radio-group v-model="actives.cardLabels2">
									<el-radio :label="1">永久有效</el-radio>
									<el-radio :label="2">自定义活动时间</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item v-if="actives.cardLabels2 == '2'" label="自定义活动时间">
								<div class="block">
									<el-date-picker size="medium" v-model="actives.activeTime" type="datetimerange"
										value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
										end-placeholder="结束日期">
									</el-date-picker>
								</div>
							</el-form-item>
							<el-form-item label="客服二维码">
								<el-upload class="avatar-uploader"
									action="/Addons/Upload/Admin/UploadImage/upload_library_img.html"
									:show-file-list="false" :on-success="handleAvatarSuccess" name='img'>
									<img v-if="imageUrl" :src="imageUrl" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</el-form-item>
							<el-form-item label="活动背景图">
								<el-upload class="avatar-uploader"
									action="/Addons/Upload/Admin/UploadImage/upload_library_img.html"
									:show-file-list="false" :on-success="handleAvatarSuccess2" name='img'>
									<img v-if="bgurl" :src="bgurl" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									<div class="el-upload__tip" slot="tip">建议图片上传尺寸 375*200</div>
								</el-upload>

							</el-form-item>
							<div>
								<strong>客户标签设置</strong>
								<el-divider></el-divider>
								<el-form-item label="规则">
									<div v-for="(guize,index) in guizes">为打卡
										<el-input style="width: 50px;" v-model="guize.days"></el-input>天的客户打上
										<el-select style="width: 150px;" v-model="guize.tags" placeholder="请选择标签">
											<el-option v-for="item in tags" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>标签
										<i :class="guize.del" style="font-size: 20px;" @click="removeGuize(index)"></i>
									</div>
									<el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="addGuize">
										添加规则</el-button>
								</el-form-item>
							</div>
						</el-form>
					</div>

					<a href="#">
						<el-button type="primary" style="margin-left: 120px;" @click="createdLists">创建任务保存</el-button>
					</a>
				</el-card>
			</div>

		</div>
        <script src="/unpkg/unpkg.vue.js"></script>
		<script src="/unpkg/lib-master/index.js"></script>
		<script src="/unpkg/unpkg.axios.min.js"></script>
		<script src="/cdn/qs.min9.js"></script>
		<script type="text/x-template" id="item-template">
		</script>

		<script type="text/javascript">
			var myapp = new Vue({
				el: '#app',
				data() {
					return {
						imageUrl: '',
						bgurl:'',
						actives: {
							activeName: '',
							explain: '',
							cardLabels1: 1,
							cardLabels2: 1,
							activeTime: [],
							region: '',
							date1: '',
							date2: '',
							delivery: false,
							desc: '',
							days1: '',
							days2: ''
						},
						tasks: [{
							step: '第1阶段',
							notice: '请设置大于上一阶段任务的天数',
							days: '',
							names: '',
						}],
						tags: [],
						guizes: [{
							days: null,
							tags: [],
						}]
					}
				},
				mounted() {
					this.getAlltag()
				},
				methods: {
					removeList(index) {
						this.tasks.splice(index, 1)
					},
					removeGuize(index) {
						this.guizes.splice(index, 1)
					},
					handleAvatarSuccess(res, file) {
						// this.imageUrl = URL.createObjectURL(file.raw);
						this.imageUrl = res.data;
					},
					handleAvatarSuccess2(res, file){
						this.bgurl = res.data;
					},
					createdLists() {
						console.log('开始');
						let t = this;
						let requestData = {
							name: this.actives.activeName,
							describe: this.actives.explain,
							type: this.actives.cardLabels1,
							expiration_type: this.actives.cardLabels2,
							start_date: this.actives.activeTime,
							set_level: this.tasks,
							qr_code: this.imageUrl,
							behavior_tag: this.guizes,
							bgurl: this.bgurl,
						};
					
						axios.post('/Addons/GroupClock/Admin/GroupClock/add.html', Qs.stringify(requestData), {
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
						}).then(res => {
                            if(res.data.status == "success"){
								this.$message.success('操作成功');
								location.href = "list.html";
							}else{
								this.$message.success('操作失败');
							}
                        })
					},
					addTask() {
						let cont = this.tasks.length
						let task = {
							notice: '请设置大于上一阶段任务的天数',
							del: 'el-icon-remove-outline',
							days: null
						}
						this.tasks.push(task)
					},
					addGuize() {
						let guize = {
							del: 'el-icon-remove-outline',
						}
						this.guizes.push(guize)
					},
					getAlltag() {
						axios.get('/Addons/GroupClock/Admin/GroupClock/getAlltag.html', {}).then(res => {
							this.tags = Object.keys(res.data.data).map(i => {
								return !{
									label: res.data.data[i],
									value: i
								}
							})
						})
					}
				}
			})
		</script>
	</body>

</html>
